<template>
  <div class="orderList">
    <Row type="flex" justify="end" style="margin:20px 0;" align="middle">
      <div style="margin-right:20px;">
        <!-- <Col > -->
          <Select v-model="model1" style="width:200px" @on-change="hanleStatusChange">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        <!-- </Col> -->
      </div>
      <div>
        <!-- <Col > -->
          <Input v-model="vipnameCache" placeholder="会员名称">
            <Button slot="append" icon="ios-search" @click="handleSearch"></Button>
          </Input>
        <!-- </Col> -->
      </div>
    </Row>
    <Table border ref="selection" :columns="columns12" :data="tableData" class="table">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
        <Button type="error" size="small" @click="show(row)">查看</Button>
      </template>
    </Table>

    <!-- page-size-opts每页条数切换的配置 -->
    <!-- show-total显示总条数 -->
    <!-- 当前页改变on-change -->
    <!-- 当前分页改变on-page-size-change -->
    <Page
      @on-change="handleCurrentChange"
      @on-page-size-change="handleCurrentPage"
      :total="totalcount"
      show-total
      :page-size-opts="[2, 4, 8, 16]"
      :page-size="pageSize"
      size="small"
      show-elevator
      show-sizer
      style="margin:20px 0;"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 下拉菜单
      cityList: [
        {
          value: 0,
          label: "全部"
        },
        {
          value: 1,
          label: "待付款"
        },
        {
          value: 2,
          label: "已付款"
        },
        {
          value: 3,
          label: "已发货"
        },
        {
          value: 4,
          label: "已签收"
        },
        {
          value: 5,
          label: "取消"
        }
      ],
      model1: "",
      //   搜索框
      value13: "",
      // 表格
      columns12: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "订单id",
          align: "center",
          key: "id"
        },
        {
          title: "会员名称",
          align: "center",
          key: "user_name"
        },
        {
          title: "地址",
          align: "center",
          key: "area"
        },
        {
          title: "快递",
          align: "center",
          key: "expressTitle"
        },
        {
          title: "状态",
          align: "center",
          key: "statusName"
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      tableData: [],
      pageIndex: 1,
      pageSize: 8,
      orderstatus: "",
      vipname: "",
      vipnameCache: "",
      totalcount: 0
    };
  },
  methods: {
    edit(row) {
       this.$router.push(`/admin/order-edit/${row.id}`);
      console.log(row.id);
    },
    show(row) {
      this.$router.push(`/admin/order-detail/${row.id}`);
    },
    // 改变状态
    hanleStatusChange(val) {
      this.orderstatus = val;
      this.orderList();
      console.log(val);
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.orderList();
      //   console.log(val);
    },
    // 当前分页
    handleCurrentPage(val) {
      this.pageSize = val;
      this.orderList();
    },
    // 请求订单分页数据
    orderList() {
      this.$axios({
        url: `/admin/order/getorderlist`,
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          orderstatus: this.orderstatus,
          vipname: this.vipname
        }
      }).then(res => {
        console.log(res);
        const { status, message } = res.data;
        if (!status) {
          this.tableData = message;
          this.totalcount = res.data.totalcount;
          //   this.model1=res.data.status
        }
        // console.log(this.totalcount);
      });
    },
    // 搜索框点击查询
    handleSearch() {
      console.log(this.vipnameCache);
      this.vipname = this.vipnameCache;
      this.pageIndex = 1;
      this.orderList();
    }
  },
  mounted() {
    this.orderList();
  }
};
</script>
<style scoped>
.ivu-page.mini >>>.ivu-page-options-elevator input {
  text-align: center;
}
.orderList {
  min-width: 700px;
}
.ivu-input-group{
    top:0;
}
</style>